<template>
  <ContentWrap>
    <div class="page-header">
      <div class="title">
        <span>
          标准库维护</span>
      </div>
      <div class="actions">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>

    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
      :inline="true"
    >

    <el-form-item label="标准编号" prop="num">
        <el-input v-model="formData.num" placeholder="请输入标准编号" class="!w-220px"/>
      </el-form-item>

      <el-form-item label="标准名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入标准名称" class="!w-220px"/>
      </el-form-item>

      <el-form-item label="标准分类" prop="type">
        <el-select v-model="formData.type" placeholder="请选择标准分类" class="!w-220px">
          <el-option label="国家标准" :value="0" />
          <el-option label="行业标准" :value="1" />
          <el-option label="中国石油企业标准" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="发布日期" prop="publishDate">
        <el-date-picker
          v-model="formData.publishDate"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="选择发布日期"
          class="!w-220px"
          range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        />
      </el-form-item>

      <el-form-item label="实施日期" prop="implementDate">
        <el-date-picker
          v-model="formData.implementDate"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="选择实施日期"
          class="!w-220px"
          range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        />
      </el-form-item>

      <el-form-item label="发布单位" prop="publishCompany">
        <el-input v-model="formData.publishCompany" placeholder="请输入发布单位" class="!w-220px" />
      </el-form-item>

      <el-form-item label="标准状态" prop="state">
        <el-select v-model="formData.state" placeholder="请选择标准状态" class="!w-220px">
          <el-option label="有效" value="0" />
          <el-option label="废止" value="1" />
          <el-option label="被替代" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap>
    <div class="section-header">
      <span>指标要求</span>
      <div class="actions">
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </div>
    </div>
    
    <el-table :data="tableData" style="width: 100%">
      <!-- <el-table-column width="55">
        <template #header>
          <span>选择</span>
        </template>
        <template #default="scope">
          <el-checkbox v-model="scope.row.selected" @change="handleSelect(scope.row)"/>
        </template>
      </el-table-column> -->

      <el-table-column prop="modelNumber" label="型号" />
      <el-table-column prop="checkProject" label="检验项目" />
      <el-table-column prop="require" label="指标要求" />
      <el-table-column prop="checkMethod" label="检验方法" />
      <!-- <el-table-column prop="createTime" label="检验方法" /> -->
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button text @click="handleUpdate(scope.row.id)">修改</el-button>
          <el-button text @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>

  <StandardMaintainForm ref="standardMaintainFormRef"  :createId="createId"  @success="getStandardTarget"/>
</template>

<script setup lang="ts">
import { StandardMaintainApi, StandardMaintainVO } from '@/api/qis/standardmaintain'
import { useRoute, useRouter } from 'vue-router'
import { useMessage } from '@/hooks/web/useMessage'
import { useI18n } from '@/hooks/web/useI18n'
import { useAppStore } from '@/store/modules/app'
import StandardMaintainForm from './StandardMaintainForm.vue'

const route = useRoute()
const router = useRouter()
const message = useMessage()
const { t } = useI18n()
const appStore = useAppStore()

// 确保页面加载时就隐藏面包屑
onBeforeMount(() => {
  appStore.setBreadcrumb(false)
})

const type = ref(route.query.type as string)
const id = ref(route.query.id as string)

const formLoading = ref(false)
const formData = ref({
  state:'0'
})

const formRules = reactive({
  num: [{ required: true, message: '标准编号不能为空', trigger: 'blur' }, { max: 30, message: '标准编号不能超过 30 个字', trigger: 'blur' }],
  name: [{ required: true, message: '标准名称不能为空', trigger: 'blur' } ,{ max: 50, message: '标准名称不能超过 50 个字', trigger: 'blur' }],
  type: [{ required: true, message: '标准分类不能为空', trigger: 'change' }],
  publishDate: [{ required: true, message: '发布日期不能为空', trigger: 'blur' }],
  implementDate: [{ required: true, message: '执行日期不能为空', trigger: 'blur' }],
  publishCompany: [{ required: true, message: '发布单位不能为空', trigger: 'blur' } ,{ max: 50, message: '标准名称不能超过 50 个字', trigger: 'blur' }],
  state: [{ required: true, message: '标准状态不能为空', trigger: 'blur' }],
})

const formRef = ref()
const tableData = ref([])

// 如果是编辑模式，获取详情数据
const getDetail = async () => {
  if (type.value === 'update' && id.value) {
    formLoading.value = true
    try {
      const data = await StandardMaintainApi.getStandardMaintain(parseInt(id.value))
      formData.value = {
        ...data,
        publishDate: data.publishDate ,
        implementDate: data.implementDate 
      }
    } finally {
      formLoading.value = false
    }
  }
}



const total = ref(0)
// 获取指标要求
const getStandardTarget = async () => {
    if(id.value){
      const data = await StandardMaintainApi.getStandardTargetPage({pageNo:1,pageSize:10000,standardMaintainId:id.value})
  console.log(data,'data')
  tableData.value = data.list
  total.value = data.total
    }
}

const createId = ref(route.query.id)

// 提交表单
const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
  try {
    const data = formData.value as unknown as StandardMaintainVO
    if (type.value === 'create') {
     const res =  await StandardMaintainApi.createStandardMaintain(data)
     console.log(res,'res')
      createId.value = res
      formData.value.id = createId.value
      id.value = createId.value
      message.success(t('common.createSuccess'))
    } else {
      await StandardMaintainApi.updateStandardMaintain(data)
      message.success(t('common.updateSuccess'))
    }
    // goBack()
  } finally {
    formLoading.value = false
  }
}

// 返回列表页
const goBack = () => {
  appStore.setBreadcrumb(true)
  router.push('/InspectionInfoManagement1/StandardMaintenance')
}

const standardMaintainFormRef = ref()

// 指标要求相关方法
const handleAdd = () => {
  if(id.value){
  standardMaintainFormRef.value.open('create')
  }else{
    message.warning('请先保存标准维护基本信息')
  }
}

const handleSelect = (row: any) => {
  console.log(row)
}

const handleUpdate = (id: number) => {
  console.log(id,'333')
  standardMaintainFormRef.value.open('update', id)
}

const handleDelete =async (id: number) => {
  await message.confirm('确定要删除该指标要求吗？')
  try {
    const res = await  StandardMaintainApi.deleteByIds(id)
    message.success('删除成功')
    getStandardTarget()
  }catch(error){
    console.log(error)
  }

}

onMounted(() => {
  getDetail()
  if(id.value){
    getStandardTarget()
  }


  if(route.query.id){
    route.meta.title = '编辑标准维护'
  }else {
    route.meta.title = '新增标准维护'
  }
})
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  padding: 0 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 18px;
    font-weight: bold;
  }
}

.section-header {
  display: flex;
  padding: 0 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 16px;
    font-weight: bold;
  }
}
</style> 